<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <cpn :cmovies="movies" :cmessage="message"></cpn>
</div>

<template id="cpn">
  <div>
    <h1>{{cmovies}}</h1>
    <h1>{{cmessage}}</h1>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
<!--  首先来定义一个子组件，至于父组件，我们用vue的实例app来当-->
  Vue.component('cpn',{
    template: `#cpn`,
    // props: ['cmovies','cmessage']

    // props: {
    //   cmovies: Array,
    //   cmessage: String
    // }

    // props: {
    //   cmovies: {
    //     type: Array,
    //     default() {
    //       return ["湖南","湖北","山东"];
    //     },
    //   },
    //   cmessage: {
    //     type: String,
    //     default: '华夏牛蛙！'
    //   }
    // }

    props: {
      cmovies: {
        type: Array,
        default() {
          return [];
        },
        required: true
      },
      cmessage: {
        type: String,
        defalut: '华夏牛蛙！',
        required: true
      }
    }

  })

  //let(变量)和const(常量)
  const app = new Vue({
    el: '#app',
    data: {
      message: '中国牛蛙！',
      movies: ['长沙','株洲','湘潭']
    }
  })
</script>

</body>
</html>